<template>
	<div class="personnelAdd personnelList">
		<!-- <div class="header_ContentBox pl_10 pr_10">
            <i class="lhadmin lhadmin-renzheng Icon"></i>
            <span class="pl_10 pr_10">/</span>
            <span class="header_text">订单列表 / 需求 / 任务详情</span>
        </div> -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/' }">
				<i class="lh lh-sys fw_100"></i>
			</el-breadcrumb-item>
			<el-breadcrumb-item>订单列表</el-breadcrumb-item>
			<el-breadcrumb-item>订单详情</el-breadcrumb-item>
		</el-breadcrumb>
		<div class="content_Box box-shadow mt_15 pl_10 pr_10">
			<div>
				<h4 class="border-bottom pb_10">订单详情</h4>
			</div>
			<div class="mt_10 wrap_grid-content mt_20">
				<el-row>
					<el-col :span="9">
						<!-- 第一列 -->
						<div class="grid-content bg-purple">
							<div class="contentInfo">
								<el-steps align-center class="mb_20" :active="active" finish-status="success">
									<el-step :title="item.node_name" v-for="(item, index) in rl_info.log" :key="index">
										<template slot="description">
											<div class="step-row">
												<h4 class="steps">{{ item.user }}</h4>
												<h4 class="steps">{{ item.date }}</h4>
												<h4 class="steps">{{ item.time }}</h4>
											</div>
										</template>
									</el-step>
								</el-steps>
								<div class="row-info clear">
									<div class="fl title-key">订单编号：</div>
									<div class="fl list-cont pointer u text-primary">{{ rl_info.sn }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">岗位：</div>
									<div class="fl list-cont">{{ rl_info.label_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">行业类型：</div>
									<div class="fl list-cont">
										{{ rl_info.industry_name }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">店铺名称：</div>
									<div class="fl list-cont pointer u text-primary">{{ rl_info.shop_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工开始日期：</div>
									<div class="fl list-cont">{{ rl_info.start_date }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工天数：</div>
									<div class="fl list-cont">{{ rl_info.period }}天</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">用工时间：</div>
									<div class="fl list-cont">
										{{ rl_info.start_time | ReversalTime }}-{{
											(Number(rl_info.start_time) + Number(rl_info.hours)) | ReversalTime
										}}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">计划用工时长：</div>
									<div class="fl list-cont">{{ rl_info.hours }}小时</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">需求人数：</div>
									<div class="fl list-cont">{{ rl_info.person_num }}人</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">商户单价：</div>
									<div class="fl list-cont">{{ rl_info.price_b }}元/小时</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">订单金额：</div>
									<div class="fl list-cont">{{ rl_info.order_total }} 元</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付状态：</div>
									<div class="fl list-cont">{{ rl_info.pay_status_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付方式：</div>
									<div class="fl list-cont">{{ rl_info.pay_way }}</div>
								</div>
								<!-- <div class="row-info clear" v-if="+rl_info.pay_money_to.length == 0">
									<div class="fl title-key">支付金额：</div>
									<div class="fl list-cont">{{ rl_info.pay_money }}元</div>
								</div>

								<div class="row-info clear" v-if="+rl_info.pay_money_to.length != 0">
									<div class="fl title-key">支付金额：</div>
									<div class="fl list-cont" v-for="(item, index) in rl_info.pay_money_to" :key="index">
										{{ item }}
									</div>
								</div> -->
								<div class="row-info clear">
									<div class="fl title-key">支付金额：</div>
									<div class="fl list-cont">{{ '' + rl_info.pay_money_to }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">退款金额：</div>
									<div class="fl list-cont">{{ rl_info.refund_money }}元</div>
								</div>

								<div class="row-info clear">
									<div class="fl title-key">预计费用：</div>
									<!-- <div class="fl list-cont">{{ rl_info.total | filterNumber }}元</div> -->
									<div class="fl list-cont">{{ rl_info.total }}元</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">备注：</div>
									<div class="fl list-cont mt_5" v-if="rl_info.remark == ''">无</div>
									<div class="fl list-cont mt_5" v-if="rl_info.remark != ''">{{ rl_info.remark }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">商圈：</div>
									<div class="fl list-cont">{{ rl_info.area_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">工作地址：</div>
									<div class="fl list-cont">{{ rl_info.address }}</div>
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="9">
						<!-- 第二列 -->
						<div class="grid-content bg-purple-light">
							<div class="contentInfo">
								<div class="row-info clear">
									<div class="fl title-key">任务状态：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.status_name }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">岗位：</div>
									<div class="fl list-cont pointer text-primary" style="min-width: 150px;">
										{{ task_info.job_name }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">接单人：</div>
									<div class="fl list-cont pointer text-primary" style="min-width: 150px;">
										{{ task_info.staff_name }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">接单人电话：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.mobile }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">计划时长：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.hour_expect }}h</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">任务金额：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.task_money }}元</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">支付状态：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.pay_status }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">实际时长：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.hour_actual }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">任务备注：</div>
									<div class="fl list-cont pointer text-primary">{{ task_info.task_description }}</div>
								</div>
								<!-- <div class="row-info clear">
                                    <div class="fl title-key">取消原因：</div>
                                    <div
                                        class="fl list-cont pointer text-primary"
                                    >{{task_info.hour_expect}}</div>
                                </div>-->
								<div class="row-info clear">
									<div class="fl title-key">异常状态：</div>
									<div class="fl list-cont pointer text-danger" v-for="item in task_info.abnormal_name" :key="item.id">
										{{ item }}
									</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">分配时间：</div>
									<div class="fl list-cont">{{ task_info.assigning_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">确认时间：</div>
									<div class="fl list-cont">{{ task_info.accept_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">签到时间：</div>
									<div class="fl list-cont">{{ task_info.checkin_time }}</div>
								</div>
								<div class="row-info clear">
									<div class="fl title-key">完成时间：</div>
									<div class="fl list-cont">{{ task_info.finish_time }}</div>
								</div>
								<div class="row-info clear mb_20">
									<div class="fl title-key">延时完成时间：</div>
									<div class="fl list-cont">{{ task_info.hour_delay }}</div>
								</div>
								<div class="row-info clear list_info" v-for="item in task_info.log" :key="item.id">
									<div class="fl title-key">{{ item.user_name }}</div>
									<div class="fl title-key" style="width: 150px;">{{ item.add_time }}</div>
									<div class="fl title-key" style="width: 250px; text-align: left;">（{{ item.title }}）</div>
									<div class="title-key signWq" v-if="item.data.check_type == 2">
										外勤打卡
									</div>
									<div class="demo-image__preview" v-if="item.data.img">
										<el-image
											style="width: 40px; height: 40px;"
											:src="head_url + item.data.img"
											:preview-src-list="[head_url + item.data.img]"
										>
										</el-image>
									</div>
									<div class="title-key" v-if="item.data.location" style="width: 250px; text-align: left;">
										<span>{{ item.data.location }}（{{ item.data.distance }}）{{ item.data.remark }}</span>
									</div>
									<!-- <div class="fl title-key">{{ item.user_name }}</div>
									<div class="fl title-key" style="width: 150px;">{{ item.add_time }}</div>
									<div class="fl title-key" style="width: 250px; text-align: left;">{{ item.title }}</div> -->
								</div>
							</div>
						</div>
					</el-col>
					<el-col :span="6">
						<!-- 第三列 -->
						<div class="grid-content bg-purple">
							<el-table
								ref="singleTable"
								:data="tableData"
								highlight-current-row
								@current-change="handleCurrentChange"
								style="width: 42%; cursor: pointer;"
								class="first fl"
							>
								<el-table-column property="date" label="任务日期"></el-table-column>
							</el-table>
							<el-table
								ref="singleTable2"
								:data="tableData2"
								highlight-current-row
								@current-change="handleCurrentChange2"
								style="width: 58%; cursor: pointer;"
								class="two fl"
							>
								<el-table-column property="task_sn" label="任务编号" width="180"></el-table-column>
							</el-table>
						</div>
					</el-col>
				</el-row>
			</div>
			<div class="ml_110 mt_80">
				<!-- <span class="resetBtn mr_10" @click="back">返回</span> -->
			</div>
		</div>
	</div>
</template>

<script>
var common = require('../../../static/tool.js')
export default {
	name: 'Main',
	data() {
		return {
			windowSizeHeight: document.documentElement.clientHeight, //浏览器可视化窗口的大小
			screenHeight: document.documentElement.clientHeight,
			manageInfo: JSON.parse(sessionStorage.getItem('manageInfo')), //登录信息
			active: 0, //进度条位置
			url: common.url,
			head_url: common.head_url,
			rl_id: '', //需求id
			rl_sn: '', //需求sn
			task_id: '', //任务id
			rl_info: {}, //订单详情
			task_info: {}, //任务详情
			tableData: [],
			tableData2: [],
			currentRow1: '',
			currentRow2: '',
			change: '1', //默认进页面的值
			change2: '1', //默认进页面的值
			localobList: JSON.parse(localStorage.getItem('industryJobList'))
		}
	},
	created() {
		this.rl_id = this.$route.query.rl_id //需求id
		this.rl_sn = this.$route.query.rl_sn //需求sn
		this.task_id = this.$route.query.task_id //任务id
		this.demandinfo()
	},
	updated() {
		if (this.change == 1) {
			// this.setCurrent1();
		}

		if (this.change2 == 1) {
			// this.setCurrent2();
		}
	},
	computed: {
		currentRow() {
			const { currentRow1, currentRow2, task_id } = this
			return {
				currentRow1,
				currentRow2,
				task_id
			}
		}
	},
	watch: {
		currentRow(val) {
			console.log(val)
			//任意值改变的时候，查询对应的任务详情
			this.taskinfo()
		}
	},
	mounted() {},
	methods: {
		demandinfo() {
			let fn = new FormData()
			if (this.rl_id != '') {
				fn.append('id', this.rl_id)
			} else {
				fn.append('sn', this.rl_sn)
			}
			this.$http.post(this.url + '/demand/info', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
						// ret.list.forEach(item => {
						if (+res.data.data.pay_money.toString().indexOf('/') == -1) {
							res.data.data.pay_money_to = [res.data.data.pay_money + '元']
						} else {
							var arr = res.data.data.pay_money.split('/')
							res.data.data.pay_money_to = arr.splice(0, arr.length - 1)
						}
						// })

						this.rl_info = res.data.data

						//进度条的位置
						res.data.data.log.forEach(item => {
							if (item.is_show == 1) {
								this.active += 1
							}
						})

						// 对用工天数进行循环
						for (let index = 0; index < res.data.data.period; index++) {
							// for (let index = 0; index < 2; index++) {
							if (index == 0) {
								this.tableData.push({
									date: res.data.data.start_date
								})
							} else {
								var nextday = this.addDate(res.data.data.start_date, index)
								this.tableData.push({ date: nextday })
							}
						}

						this.$refs.singleTable.setCurrentRow(this.tableData[0])
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		taskinfo() {
			let fn = new FormData()
			fn.append('id', this.task_id)
			this.$http.post(this.url + '/task/info', fn).then(
				res => {
					if (res.data.msg == '查询成功' || res.data.code == '200') {
					  if (res.data.data.task_money) {
              res.data.data.task_money = this.moneyUnitCent2Coin(res.data.data.task_money)
            }
						this.task_info = res.data.data
            if (this.task_info.log) {
              this.task_info.log.forEach(it => {
                if (it.data.distance) {
                  it.data.distance = it.data.distance > 1000 ? it.data.distance / 1000 + 'km' : it.data.distance + '米'
                }
              })
            }

						if (res.data.data.staff_name == '') {
							this.task_info.staff_name = '暂无'
						}

						if (res.data.data.mobile == '') {
							this.task_info.mobile = '暂无'
						}
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		addDate(date, days) {
			var d = new Date(date)
			d.setDate(d.getDate() + days)
			var m = d.getMonth() + 1
			var dd = d.getDate()
			if (m < 10) {
				m = '0' + m
			}
			if (dd < 10) {
				dd = '0' + dd
			}
			return d.getFullYear() + '-' + m + '-' + dd
		},
		back() {
			//返回
			this.$router.go(-1)
		},
		handleCurrentChange(val) {
			this.change1 = 2
			this.currentRow1 = val.date
			// 查询对应的编号列表
			this.listShop()
		},
		handleCurrentChange2(val) {
			this.change2 = 2
			this.currentRow2 = val.task_sn
			this.task_id = val.id
		},
		listShop() {
			//获取任务列表
			let fn = new FormData()
			fn.append('source', 'info')
			fn.append('time_type', 2)
			fn.append('demand_sn', this.rl_sn)
			fn.append('start_time', this.currentRow1)
			this.$http.post(this.url + '/task/list', fn).then(
				res => {
					console.log(res.data.data)
					if (res.data.msg == '查询成功！' || res.data.code == '200') {
						if (res.data.data != null) {
							this.tableData2 = res.data.data.list || []
						} else {
							this.tableData2 = []
						}
						if (this.tableData2.length && this.tableData2[0]) {
              this.$refs.singleTable2.setCurrentRow(this.tableData2[0])
            }
					} else if (res.data.code == '8886') {
						//code   8886  登录过期
						sessionStorage.clear()
						this.$alert('登录已过期，请重新登录 !', '提示', {
							confirmButtonText: '确定',
							callback: action => {
								window.location = 'login.html'
							}
						})
						return
					} else {
						this.$message.error(res.data.msg)
						return
					}
				},
				res => {
					this.$message.error('网络错误！')
					return
				}
			)
		},
		setCurrent1() {
			//默认选中第一行
			this.$refs.singleTable.setCurrentRow(this.tableData[0])
		},
		setCurrent2() {
			//默认选中第一行
			this.$refs.singleTable2.setCurrentRow(this.tableData2[0])
		}
	},
	filters: {
		ReversalTime: function (value) {
			value = value % 24
			return common.getReversalTime(value)
		}
	}
}
</script>

<style scoped>
.wrap_grid-content {
	border: 1px solid #ebebeb;
}
.grid-content {
	padding: 10px 15px 30px;
}
.bg-purple-light {
	min-height: 687px;
	border-right: 1px solid #ebebeb;
	border-left: 1px solid #ebebeb;
}
.row-info .title-key {
	width: 95px;
}
.area {
	background: #f7f7f7;
	border-radius: 8px;
	padding: 0 10px;
	width: 300px;
	min-height: 200px;
}
.row-info .list-cont {
	margin-left: 10px;
}

.steps {
	color: #888888;
}

.list_info {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 20px;
	border-bottom: 1px dashed #ebebeb;
}
.list_info:last-child {
	border-bottom: none;
}
.row-info .title-key {
	text-align: left;
}
.signWq {
	width: 110px !important;
}
</style>



// WEBPACK FOOTER //
// src/components/roledemand/Mainxq.vue